<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.list{
		    width: 300px;
		    border: 1px solid #999;
		    margin: 20px auto;
		    position: relative;
		    height: 200px;
		    overflow: hidden;
		}

		.list .rowup{
		    -webkit-animation: 10s rowup linear infinite normal;
		    animation: 10s rowup linear infinite normal;
		    position: relative;
		}
	</style>
</head>
<body>
	<div class="list">
	    <div class="cc rowup">
	    	<div class="ss">
		        <div class="item">1- 121233fffffr国家认可更健康进口价格困扰</div>
		        <div class="item">2- 3123233</div>
		        <div class="item">3- 个人口结构俄跨入国际科技馆客人感觉</div>
		        <div class="item">4- ggrgerg</div>
		        <div class="item">5- fvdgdv</div>
		        <div class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</div>
		        <div class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</div>
				<div class="item">8- 德国网红致信默克尔</div>
		    	<div class="item">9- 国资委原</div>
	    	</div>
	    </div>
	</div>
	<script type="text/javascript">
		// 设置keyframes属性
		function addKeyFrames(y){
		    var style = document.createElement('style');
		    style.type = 'text/css';
		    var keyFrames = '\
		    @-webkit-keyframes rowup {\
		        0% {\
		            -webkit-transform: translate3d(0, 0, 0);\
		            transform: translate3d(0, 0, 0);\
		        }\
		        100% {\
		            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
		            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
		        }\
		    }\
		    @keyframes rowup {\
		        0% {\
		            -webkit-transform: translate3d(0, 0, 0);\
		            transform: translate3d(0, 0, 0);\
		        }\
		        100% {\
		            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
		            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
		        }\
		    }';
		    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
		    document.getElementsByTagName('head')[0].appendChild(style);
		}
		function init(){
		    document.querySelector('.list .rowup').innerHTML += `<div class="ss">${document.querySelector('.list .ss').innerHTML}</div>`; // 复制一份数据
		    var height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度
		    addKeyFrames( '-'+height+'px' ); // 设置keyframes
		    document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup
		}
		init(); 
	</script>
</body>
</html>